<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>棉花公证检验条码打印系统</title>
    <link rel="stylesheet" href="./static/css/style.css">
    <!--
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    -->
    <link rel="stylesheet" href="./static/css/all.min.css">
    <style>
    .length-indicator {
        display: block;
        font-size: 0.9em;
        color: #666;
        margin-top: 4px;
    }

    .length-indicator.warning {
        color: #ff4444;
    }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const inspectionType = document.getElementById('inspection_type');
            const startNumber = document.getElementById('start_number');
            const lengthInfo = document.getElementById('length_info');
            const currentLength = document.getElementById('current_length');
            
            // 定义每种类型的长度限制
            const lengthLimits = {
                '经营性棉花公证检验': 18,
                '期货交割棉公证检验': 19,
                '交易撮合棉公证检验': 20,
                '其他类型公证检验': 21
            };
            
            // 更新长度显示和验证
            function updateLengthValidation() {
                const selectedType = inspectionType.value;
                const limit = lengthLimits[selectedType];
                const currentValue = startNumber.value;
                
                // 更新限制信息
                lengthInfo.textContent = `(${limit}位)`;
                
                // 设置输入框的maxlength属性
                startNumber.maxLength = limit;
                
                // 更新当前长度显示
                currentLength.textContent = `当前长度: ${currentValue.length}/${limit}`;
                
                // 如果超过限制，添加警告样式
                if (currentValue.length > limit) {
                    currentLength.classList.add('warning');
                    startNumber.setCustomValidity(`输入长度不能超过${limit}位`);
                } else {
                    currentLength.classList.remove('warning');
                    startNumber.setCustomValidity('');
                }
            }
            
            // 监听选择框变化
            inspectionType.addEventListener('change', updateLengthValidation);
            
            // 监听输入框变化
            startNumber.addEventListener('input', updateLengthValidation);
            
            // 初始化验证
            updateLengthValidation();
        });
    </script>
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-barcode"></i> 棉花公证检验条码打印系统</h1>
        </header>

        <main>
            <form method="post" class="form-container">
                <div class="form-section">
                    <h2><i class="fas fa-cog"></i> 系统设置</h2>
                    <div class="form-group">
                        <label for="inspection_type"><i class="fas fa-clipboard-check"></i> 公证检验类型:</label>
                        <select id="inspection_type" name="inspection_type">
                            <option value="经营性棉花公证检验">经营性棉花公证检验·18位条码</option>
                            <option value="期货交割棉公证检验">期货交割棉公证检验·19位条码</option>
                            <option value="交易撮合棉公证检验">交易撮合棉公证检验·20位条码</option>
                            <option value="其他类型公证检验">其他类型公证检验·21位条码</option>
                        </select>
                    </div>
                </div>

                <div class="form-section">
                    <h2><i class="fas fa-info-circle"></i> 检验信息</h2>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="batch_number"><i class="fas fa-hashtag"></i> 批号:</label>
                            <input type="text" id="batch_number" name="batch_number" value="123" required>
                        </div>
                        <div class="form-group">
                            <label for="sample_number"><i class="fas fa-vial"></i> 样品号:</label>
                            <input type="text" id="sample_number" name="sample_number" value="345" required>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="origin"><i class="fas fa-map-marker-alt"></i> 产地:</label>
                            <input type="text" id="origin" name="origin" value="河南郑州" required>
                        </div>
                        <div class="form-group">
                            <label for="package_number"><i class="fas fa-box"></i> 包号:</label>
                            <input type="text" id="package_number" name="package_number" value="332" required>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="sampling_date"><i class="fas fa-calendar-alt"></i> 抽样日期:</label>
                        <input type="date" id="sampling_date" name="sampling_date" value="2025-09-18" required>
                    </div>
                    <div class="form-group">
                        <label for="remark"><i class="fas fa-pen"></i>备注:</label>
                        <input type="text" id="remark" name="remark" value="无内容！" required>
                    </div>
                </div>

                <div class="form-section">
                    <h2><i class="fas fa-barcode"></i> 条码设置</h2>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="start_number"><i class="fas fa-sort-numeric-up"></i> 起始编号: <span id="length_info">(18位)</span></label>
                            <input type="text" id="start_number" name="start_number" value="000000000000000001" required>
                            <span id="current_length" class="length-indicator">当前长度: 18/18</span>
                        </div>
                        <div class="form-group">
                            <label for="barcode_count"><i class="fas fa-list-ol"></i> 条码数量:</label>
                            <input type="number" id="barcode_count" name="barcode_count" min="1" max="100" value="10" required>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="width_cm"><i class="fas fa-arrows-alt-h"></i> 条码宽度 (cm):</label>
                            <input type="number" id="width_cm" name="width_cm" step="0.1" min="3" max="15" value="7" required>
                        </div>
                        <div class="form-group">
                            <label for="height_cm"><i class="fas fa-arrows-alt-v"></i> 条码高度 (cm):</label>
                            <input type="number" id="height_cm" name="height_cm" step="0.1" min="1" max="10" value="2" required>
                        </div>
                    </div>
                </div>

                <div class="form-actions">
                    <button type="reset" class="btn btn-secondary"><i class="fas fa-redo"></i> 重置</button>
                    <button type="submit" class="btn btn-primary"><i class="fas fa-print"></i> 生成条码</button>
                </div>
            </form>
        </main>

        <footer>
            <p>棉花公证检验条码打印系统 &copy; 2025</p>
        </footer>
    </div>
</body>
</html>